<template>
	<view>
		<!-- 2.0.19支持autoBack，默认为false -->
		<u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true" rightText="保存" rightColor="#528efe"
			leftIconColor="#528efe">
		</u-navbar>
		<div class="conBei">
			<div class="top">
				备注信息
			</div>
			<div class="yb">
				<input type="text" placeholder="请输入备注信息" class="inp" />
			</div>
			<u-cell-group>
				<u-cell size="large" title="上传附件" value="选择附件" isLink @click="show = true"></u-cell>
			</u-cell-group>
			<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
				<div class="ul">
					<li class="li" @click="pd">拍照</li>
					<li class="li" @click="xr">从相册中选择</li>
					<li class="li" @click="bf">选择本地文件</li>
				</div>
				<div class="quxn" @click="show = false">取消</div>
			</u-popup>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			pd() {
				console.log('拍照')
				uni.navigateTo({
					url:'/pages/message/crunch/photograph/photograph'
				})
			},
			xr() {
				console.log('相册')
				uni.chooseImage({
					count: 1, // 最多选择的图片数量
					sizeType: ['original', 'compressed'], // 图片选择的类型，原图和压缩图
					sourceType: ['album'], // 图片选择的来源，相册
					success: res => {
						// 选择图片成功的回调函数
						console.log('选择的图片路径：', res.tempFilePaths);
					},
					fail: err => {
						// 选择图片失败的回调函数
						console.log('选择图片失败：', err);
					}
				});
			},
			bf() {
				console.log('选择')
				uni.chooseImage({
					count: 1, // 最多选择的图片数量
					sizeType: ['original', 'compressed'], // 图片选择的类型，原图和压缩图
					sourceType: ['album'], // 图片选择的来源，相册
					success: res => {
						// 选择图片成功的回调函数
						console.log('选择的图片路径：', res.tempFilePaths);
					},
					fail: err => {
						// 选择图片失败的回调函数
						console.log('选择图片失败：', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quxn {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #3478f7;
	}

	.ul {
		width: 100%;
		// border-radius: 40rpx;
		border-bottom: 40rpx solid #a7a7a7;

		// height: 30px;
		// background-color: saddlebrown;
		.li {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #f2f2f2;
			text-align: center;
			color: #3478f7;
			line-height: 100rpx;
		}
	}

	.conBei {
		width: 100%;
		// height: 300rpx;
		// background-color: saddlebrown;
		// padding-top: 200rpx;
		border-top: 180rpx solid #f9f9f9;

		.top {
			padding: 30rpx;
		}

		.yb {
			padding: 30rpx;
			padding-top: 0;
			height: 200rpx;
			border-bottom: 40rpx solid #f9f9f9;

			.inp {
				width: 100%;
				// height: 100rpx;
			}
		}
	}
</style>